<template>
  <div class="upload-box">
    <el-upload action="#" list-type="picture-card" :auto-upload="false" :beforeUpload="beforeAvatarUpload">
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
            <i class="el-icon-download"></i>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false
    };
  },
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    beforeAvatarUpload(file) {                
      var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)                 
      const extension = testmsg === 'jpg'  
      const extension2 = testmsg === 'png'  
      const isLt2M = file.size / 1024 / 1024 < 10  
      if(!extension && !extension2) {  
          this.$message({  
              message: '上传文件只能是 jpg、png格式!',  
              type: 'warning'  
          });  
      }  
      if(!isLt2M) {  
          this.$message({  
              message: '上传文件大小不能超过 10MB!',  
              type: 'warning'  
          });  
      }  return extension || extension2 && isLt2M  
} ,
  }
};
</script>
<style lang="less" scoped>
/deep/.el-upload--picture-card {
  width: 88px;
  height:88px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
/deep/.el-upload-list__item {
  width: 88px;
  height: 88px;
  margin-right: 0px;
  
}
/deep/.el-icon-zoom-in{
    font-size: 10px;
}
/deep/.el-icon-download{
    font-size: 10px;
}
/deep/.el-icon-delete{
    font-size: 10px;
}
.upload-box{
  width: 88px;
  height: 88px;
  overflow: hidden;
  ul{
    li{
      div{
        >span{
          display: flex;
        }
      }
    }
  }
}
</style>